<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用表单项标签</title>
    <style>
        body{
            background: url("../新建文件夹 (2)/timg.jpg");
        }


        .center{
            /*背景颜色*/
            background-color: white;
            /*宽度*/
            width: 400px;
            /*文本对齐方式*/
            text-align: center;
            /*外边距*/
            margin: auto;
        }

    </style>

</head>

    <body>
   <div class="center">注册详情

       <form action="#" method="post" autocomplete="off">

           <!--用户名栏-->
           <div>
           <label for="username">用户名:</label>
           <input type="text" id="username" name="username"value=""
                  placeholder="请输入用户名" required/> <br/>
           </div>

           <div>
               <label for="password">密码:</label>
               <input type="password" id="password" name="password" value=""
                      placeholder="请输入密码" required/> <br/>
           </div>

           <div>
               <label for="email">邮箱:</label>
               <input type="email" id="email" name="email" value=""
                      placeholder="请输入邮箱" required/> <br/>
           </div>

           <div>
               <!--电话-->
               <label for="tel">电话</label>
               <input type="tel" id="tel" name="tel" value=""
               placeholder="请输入电话"/> <br/>
            </div>

           <div>
               <!--性别-->
               <label for="gender">性别:</label>
               <input type="radio" id="gender" name="gender" value="men"/>男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <input type="radio"  name="gender" value="women"/>女 <br/>
           </div>
           <div>
               <!--爱好-->
               <label for="hobby">爱好:</label>
               <input type="checkbox" id="hobby" name="hobby" value="吃" /> 玩游戏
               <input type="checkbox"  name="hobby" value="喝"/> 运动
               <input type="checkbox"  name="hobby" value="玩"/> 看电视
               <br/>
           </div>
           <div>
               <!--生日-->
               <label for="birthday">生日:</label>
               <input type="date" id="birthday" name="birthday" value=""/>
               <br/>
           </div>

           <div>
               所在城市:<select name="city">
               <option>---请选择城市---</option>
               <optgroup label="直辖市">
                   <option>北京</option>
                   <option>上海</option>
                   <option>重庆</option>
                   <option>天津</option>
               </optgroup>

               <optgroup label="省会市">
                   <option>杭州</option>
                   <option>昆明</option>
                   <option>南宁</option>
                   <option>乌兰巴托</option>
               </optgroup>
           </select>
               <br/>
               个人介绍：<textarea name="desc" rows="4" cols="25"></textarea>
           </div>

            <div>
                <!--提交-->
                <button type="submit">注册</button>
                <button type="reset">重置</button>
            </div>

   </div>
    </body>
</html>